/**
 * 课程卡片组件
 */

'use client';

import React from 'react';
import { ProcessedCourse } from '../../types/course';
import { getTextColor } from '../../utils/colorUtils';
import { getCourseDisplayText } from '../../utils/scheduleUtils';
import { clsx } from 'clsx';

export interface CourseCardProps {
  /** 课程信息 */
  course: ProcessedCourse;
  /** 点击事件 */
  onClick: (course: ProcessedCourse) => void;
  /** 是否显示动画 */
  showAnimation?: boolean;
  /** 自定义类名 */
  className?: string;
}

export const CourseCard: React.FC<CourseCardProps> = ({
  course,
  onClick,
  showAnimation = true,
  className
}) => {
  const displayText = getCourseDisplayText(course);
  const textColor = getTextColor(course.color);
  
  const cardStyle = {
    backgroundColor: course.color,
    color: textColor,
    gridRow: `${course.gridPosition.row} / span ${course.gridPosition.rowSpan}`,
    gridColumn: course.gridPosition.column
  };

  return (
    <div
      className={clsx(
        'course-card relative rounded-lg p-2 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-white/20',
        'flex flex-col justify-center text-center min-h-[60px]',
        className
      )}
      style={cardStyle}
      onClick={() => onClick(course)}
    >
      <div className="course-name font-semibold text-sm leading-tight mb-1 line-clamp-2">
        {displayText.name}
      </div>
      <div className="course-location text-xs opacity-90">
        {displayText.location}
      </div>
      {/* <div className="course-teacher text-xs opacity-80 line-clamp-1 mt-1">
        {displayText.teacher}
      </div> */}
    </div>
  );
};
